<template>
	<view class="content">
		<image class="banner-img"
			src="https://www.zhaoxiedu.net/static/imgs/banner/%E4%B8%AA%E4%BA%BA%E4%B8%AD%E5%BF%83.jpg" mode=""></image>

		<view v-if="!token" class="tip-box">
			<text>您尚未登录，点我</text>
			<text @click="goLogin" class="color-btn">登录</text>
		</view>

		<view v-else class="tip-box">
			<text class="color-btn">Tina</text>
			<text>，欢迎你~</text>
		</view>
		<!-- <navigator :url="`/pages/login/login`"><button class="btn" size="mini" type="default">登录</button></navigator> -->
		<uni-title title1="VIP" title2="资源下载" text1="VIP学员可获取对应课程的视频源码"></uni-title>

		<view class="course-box">
			<view @click="goCourse(i)" v-for="i in resourceListByTypeVip" class="public-list">
				<image :src="baseUrl+i.imageUrl" mode=""></image>
				<text>{{i.name}}</text>
			</view>
		</view>
		<uni-title title1="配套" title2="资源下载" text1="VIP学员可获取的配套学习资料"></uni-title>
		<view class="course-box">
			<view @click="goCourse(i)" v-for="i in resourceListByTypeSupporting" class="public-list">
				<image :src="baseUrl+i.imageUrl" mode=""></image>
				<text>{{i.name}}</text>
			</view>
		</view>
		<uni-title title1="视频课" title2="资源下载" text1="独立的小额视频课资源"></uni-title>
		<view class="course-box">
			<view @click="goCourse(i)" v-for="i in resourceListByGift" class="public-list">
				<image :src="baseUrl+i.imageUrl" mode=""></image>
				<text>{{i.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getResourceList
	} from '../../httpd/index.js'
	export default {
		data() {
			return {
				resourceList: [],
				resourceListByTypeVip: [],
				resourceListByTypeSupporting: [],
				resourceListByGift: [],
				baseUrl: 'https://www.zhaoxiedu.net',
				token: ''
			}
		},
		onLoad() {
			let _this = this
			uni.getStorage({
				key: 'token',
				success: function(res) {
					_this.token = res.data
					console.log(_this.token)
				},
			})
			getResourceList().then(res => {
				this.resourceList = res.data.data
				this.resourceListByTypeVip = this.resourceList.filter((m) => m.type == 1),
					this.resourceListByTypeSupporting = this.resourceList.filter((m) => m.type == 2),
					this.resourceListByGift = this.resourceList.filter((m) => m.type == 3)
			})
		},
		methods: {
			goCourse(i) {
				let _this = this
				if (this.token) {
					//携带当前课程的链接跳转到publicView
					//:url="`/pages/publicView/publicView?url=${i.url}&title=${i.courseName}
					uni.navigateTo({
						url: `/pages/publicView/publicView?url=${i.lessonUrl}&title=${i.name}`
					});
				} else {
					uni.showModal({
						title: '提示',
						content: 'VIP资源需要登录查看',
						success: function(res) {
							if (res.confirm) {
								//进入登录页面
								// console.log('用户点击确定');
								_this.goLogin()
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				}
			},
			goLogin() {
				uni.navigateTo({
					url: `/pages/login/login`
				});
			}
		}
	}
</script>

<style scoped>
	.course-box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 10px;
	}

	.banner-img {
		width: 100%;
		height: 120px;
	}

	.public-list {
		width: 48%;
		height: 120px;
		margin-bottom: 40px;
		text-align: center;
	}

	.public-list image {
		width: 100%;
		height: 120px;
		/* #ifdef MP */
		height: 100px;
		/* #endif */
		/* height: 120px; */
		/* #ifdef APP-PLUS */
		height: 120px;
		/* #endif */
		margin-bottom: 5px;
	}

	.public-list text {
		font-size: 14px;
		color: #333;
	}

	.tip-box {
		font-size: 25px;
		font-weight: 600;
		text-align: center;
		margin-top: 15px;
	}

	.tip-box .color-btn {
		color: #eb7c06;
	}
</style>
